<template>
  <div class="userBaseInfo">
    <el-form  label-width="150px" size="small" ref="form" :model="form" :label-position="'right'" :rules="rules">
      <el-form-item label="公司名称：" required prop="name">
        <span v-if="type=='see'">{{form.name}}</span>
        <el-input v-else v-model="form.name" placeholder="请输入公司名称" ></el-input>
      </el-form-item>
      <div class="line" v-if="type=='see'"></div>
<!--      <el-form-item label="公司编码：" required  prop="id">-->
<!--        <span>{{form.id}}</span>-->
<!--      </el-form-item>-->
<!--      <div class="line"  v-if="type=='see'"></div>-->
      <el-form-item label="英文全称：" >
        <span v-if="type=='see'">{{form.enName}}</span>
        <el-input v-else v-model="form.enName" placeholder="请输入英文全称"></el-input>
      </el-form-item>
      <div class="line" v-if="type=='see'"></div>
      <el-form-item label="公司简称：" prop="shortName">
        <span v-if="type=='see'">{{form.shortName}}</span>
        <el-input v-else v-model="form.shortName" placeholder="请输入公司简称"></el-input>
      </el-form-item>
      <div class="line" v-if="type=='see'"></div>
      <el-form-item label="统一社会信用代码：" required prop="taxNo">
        <span v-if="type=='see'">{{form.taxNo}}</span>
        <el-input v-else v-model="form.taxNo" placeholder="请输入统一社会信用代码"></el-input>
      </el-form-item>
      <div class="line" v-if="type=='see'"></div>
      <el-form-item label="联系人：" required prop="primaryContactPerson">
        <span v-if="type=='see'">{{form.primaryContactPerson}}</span>
        <el-input v-else v-model="form.primaryContactPerson" placeholder="请输入联系人"></el-input>
      </el-form-item>
      <div class="line" v-if="type=='see'"></div>
      <el-form-item label="联系电话：" prop="tel">
        <span v-if="type=='see'">{{form.tel}}</span>
        <el-input v-else v-model="form.tel" placeholder="请填写联系电话"></el-input>
      </el-form-item>
      <div class="line" v-if="type=='see'"></div>
      <el-form-item label="公司类型：" >
        <el-checkbox-group v-model="checkList1" @change="change1" :disabled="true">
          <el-checkbox v-for="(item,index) in sysTenantTypeList" :key="index" :label="item.code">{{ item.name }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <div class="line" ></div>
      <el-form-item label="内外贸方式：" >
        <el-checkbox-group v-model="form.tradeList" :disabled="true">
          <el-checkbox  :label="'N'">内贸</el-checkbox>
          <el-checkbox  :label="'W'">外贸</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <div class="line" ></div>
      <el-form-item label="是否为持箱人："  :disabled="true">
        <el-radio v-model="form.isCstCoper" :disabled="true" :label="true">是</el-radio>
        <el-radio v-model="form.isCstCoper" :disabled="true" :label="false">否</el-radio>
      </el-form-item>
      <div class="line" v-if="form.isCstCoper"></div>
      <el-form-item label="所属箱控公司：" v-if="form.isCstCoper">
        <span v-if="type=='see'">{{form.id}}</span>
        <el-input v-else v-model="form.cntrOwner" placeholder="请选择所属箱控公司"></el-input>
      </el-form-item>
      <div class="line" v-if="type=='see' && form.isCstCoper"></div>
      <el-form-item label="所属船公司：" v-if="form.isCstCoper">
        <span v-if="type=='see'">{{form.shipOwner}}</span>
        <el-input v-else v-model="form.shipOwner" placeholder="请选择所属船公司"></el-input>
      </el-form-item>
      <div class="line" v-if="type=='see'"></div>
      <el-form-item label="所属码头：">
        <el-checkbox-group v-model="checkList2" @change="change2" :disabled="true">
          <el-checkbox v-for="(item,index) in sysWorkLocationList" :key="index" 
          :label="item.termCode">{{ item.cnName }}</el-checkbox>
          <!-- <el-checkbox v-for="(item,index) in sysWorkLocationList" :key="index" :label="item.termCode">{{ item.cnName }}</el-checkbox> -->
        </el-checkbox-group>
      </el-form-item>
      <div class="line" ></div>
      <el-form-item label="结算方式："   >
        <el-radio v-model="form.billType" :disabled="true" :label="0">现结</el-radio>
        <el-radio v-model="form.billType" :disabled="true" :label="1">月结</el-radio>
      </el-form-item>
      <div class="line" v-if="type=='see'"></div>
      <el-form-item label="对账联系人：" >
        <span v-if="type=='see'">{{form.financePerson}}</span>
        <el-input v-else v-model="form.financePerson" placeholder="请输入对账联系人"></el-input>
      </el-form-item>
      <div class="line" v-if="type=='see'"></div>
      <el-form-item label="对账邮箱：" >
        <span v-if="type=='see'">{{form.contactMail}}</span>
        <el-input v-else v-model="form.contactMail" placeholder="请输入对账邮箱"></el-input>
      </el-form-item>
      <div class="line" v-if="type=='see'"></div>
      <el-form-item label="银行账号：">
        <span v-if="type=='see'">{{form.bankNo}}</span>
        <el-input v-else v-model="form.bankNo" placeholder="请输入银行账号"></el-input>
      </el-form-item>
      <div class="line" v-if="type=='see'"></div>
      <el-form-item label="开户银行：">
        <span v-if="type=='see'">{{form.bank}}</span>
        <el-input v-else v-model="form.bank" placeholder="请选择开户银行"></el-input>
      </el-form-item>
      <div class="line" v-if="type=='see'"></div>
      <el-form-item label="企业负责人：" >
        <span v-if="type=='see'">{{form.contactPerson}}</span>
        <el-input v-else v-model="form.contactPerson" placeholder="请输入企业负责人"></el-input>
      </el-form-item>
      <div class="line" v-if="type=='see'"></div>
      <el-form-item label="企业负责人电话：" >
        <span v-if="type=='see'">{{form.contactNumber}}</span>
        <el-input v-else v-model="form.contactNumber" placeholder="请输入企业负责人电话"></el-input>
      </el-form-item>
      <div class="line" v-if="type=='see'"></div>
      <el-form-item label="国家和地区：">
        <span v-if="type=='see'">{{form.region}}</span>
        <el-input v-else v-model="form.region" placeholder="请选择所属国家和地区"></el-input>
      </el-form-item>
      <div class="line" v-if="type=='see'"></div>
      <el-form-item label="地址：">
        <span v-if="type=='see'">{{form.address}}</span>
        <el-input v-else v-model="form.address" placeholder="请填写地址"></el-input>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
let defaultForm = {
  "id": "",
  "address": "",
  "bank": "",
  "bankNo": "",
  "billType": 0,
  "cntrOwner": "",
  "contactMail": "",
  "contactNumber": "",
  "contactPerson": "",
  "enName": "",
  "financePerson": "",
  "primaryContactPerson": "",
  "isCstCoper": false,
  "name": "",
  "region": "",
  "shipOwner": "",
  "shortName": "",
  "sysTenantTypeList": [],
  "sysWorkLocationList": [],
  "taxNo": "",
  "tel": "",
  "tradeList": [
  ]
}
export default {
  name: "userBaseInfo",
  props:{
    type:{
      default:'see'
    },
    termList:[],
  },
  methods:{
    validate(){
      return new Promise((resolve,reject)=>{
        this.$refs.form.validate(v=>{
          if(v){
            resolve(this.form)
          }else{
            reject()
          }
        })
      })
    },
    setData(data){
      Object.keys(this.form).forEach(x=>{
        this.form[x] = data[x]
      })
      this.checkList1 = data.sysTenantTypeList.map(x=>x.tenantType)
      this.checkList2 = data.sysWorkLocationList.map(x=>x.code)
      console.log(this.form.tradeList)
    },
    change1(v){
      this.form.sysTenantTypeList = v.map(x=>{
        return {
          tenantType:x,
        }
      })
    },
    change2(v){
      this.form.sysWorkLocationList = v.map(x=>{
        return {
          code:x,
          name:this.sysWorkLocationListMap[x]
        }
      })
    },
    getSchedulesTerm(){
      this.$api.getSchedulesTerm().then(res=>{
        let obj = {}
        this.sysWorkLocationList = res.data.data
        res.data.data.forEach(x=>{
          obj[x.termCode] = x.cnName
        })
        this.sysWorkLocationListMap = obj
      })
    },
    getCustomerTypeList(){
      this.$api.getCustomerTypeList().then(res=>{
        this.sysTenantTypeList = res.data
        let obj = {}
        res.data.forEach(x=>{
          obj[x.code] = x.name
        })
        this.sysTenantTypeListMap = obj
      })
    },
  },
  mounted() {
    this.getCustomerTypeList()
    this.getSchedulesTerm()
  },
  data(){
    return {
      rules:{
        name: [{ required: true, message: '必填' }],
        shortName: [{ required: true, message: '必填' }],
        taxNo: [{ required: true, message: '必填' }],
        primaryContactPerson: [{ required: true, message: '必填'}],
        tel: [{ required: true, message: '必填'}],
      },
      checkList1:[],
      checkList2:[],
      sysWorkLocationList:[
      ],
      sysWorkLocationListMap:{
      },
      sysTenantTypeList:[],
      sysTenantTypeListMap:{},
      form:{
        ...defaultForm
      }
    }
  },
}
</script>

<style scoped lang="scss">
.userBaseInfo{
  .line{
    width: 100%;
    height: 1px;
    background-color: #E7E7E7;
    margin-top: -10px;
    margin-bottom: 7px;
  }
}
</style>